<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
    *{
        margin: 0;padding: 0;
    }
    li{list-style:none;}
        .select_province{
            position: relative;
            width: 202px;
            height: auto;
        }
        .select_pr_text{
            height: 30px;
            display:flex;
            justify-content: space-between;
            border:1px solid orange;
            text-overflow: ellipsis;
            white-space:nowrap ;
            line-height: 30px;
        }
        .select_pr_text>.fa-chevron-down.dels{
            transform: rotate(-180deg);
        }
        .fa-chevron-down{
            line-height: 30px;
            display:inline-block;
            margin-top: 5px;
            margin-right: 15px;
            transition: all .5s ease;
        }
        .select_pr_panel{
            position:absolute;
            top:30px;
            height: 285px;
            width:200px;
            overflow-y: auto;
            background:white;
            z-index: 99;
            border:1px solid orange;

        }
        .select_pr_panel>li{
            border-bottom: 1px solid orange;
        }
        .arctive{
            background: lightgray;
            color: white;
        }
    </style>
    <body ng-controller = 'mainCtrl'>
        
     <province-select area-list='list1' area-value = 'areaValue1' level="1"></province-select>
     <province-select area-list='list2' area-value = 'areaValue2' level="2"></province-select>
     <province-select area-list='list3' area-value = 'areaValue3' level="3"></province-select>
        


    <script type="text/javascript" src="../js/angular.js"></script>
    <script type="text/javascript">
    angular.module('myApp',[])
    .controller('mainCtrl',['$scope','$http',function($scope,$http) {
        
        $scope.list1={};
        $scope.areaValue1 = {name:'请选择省'};

        $scope.list2={};
        $scope.areaValue2 = {name:'请选择市'};

        $scope.list3={};
        $scope.areaValue3 = {name:'请选择区'};


        $scope.$on('area-selected',function(e,item,level){
            if(level === '1'){
                $http.get('../json/city.json',{
                    params: {
                        ProID : item.ProID
                    }
                }).then(res => {
                  $scope.list2 =  res.data.filter(o => o.ProID == item.ProID)
                });
                $scope.areaValue2 = {name:'请选择市'};
                $scope.areaValue3 = {name:'请选择区'};
            }else if(level === '2') {
                $http.get('../json/area.json',{
                    params: {
                        CityID : item.CityID
                    }
                }).then(res => {
                 $scope.list3 =  res.data.filter(o => o.CityID == item.CityID).map(o=>{
                            o.name = o.DisName;
                            return o;
                        })
                 //console.log(res.data.filter(o => o.CityID == item.CityID))
                });
                $scope.areaValue3 = {name:'请选择区'};
            }

            //console.log(typeof level)
            //console.log(item)
        })

        $http.get('../json/province.json').then(res => {
            //console.log(res.data)
           $scope.list1 = res.data
        });

    }])

    .directive('provinceSelect',[function(){

        return {
            template:'<div class="select_province">\
                           <div class="select_pr_text"  ng-click="toggle()">\
                                <span>{{areaValue.name}}</span>\
                            </div>\
                           <ul class="select_pr_panel" ng-show="Open">\
                               <li ng-repeat = "(index,item) in areaList" ng-click="selecArea(index,item)">{{item.name}}</li>\
                           </ul>\
                      </div>',
            restrict:'E',
            replace:true,
            scope:{
                areaList:'=',
                areaValue:'='
            },
            link:function($scope, ele, attrs, controller,) {
                $scope.Open = false;

                $scope.toggle = function(){
                    $scope.Open = !$scope.Open;
                }
                $scope.selecArea = function (i,item) {
                    $scope.areaValue = item
                    $scope.Open = false;
                    $scope.$emit('area-selected',item,attrs.level);
                   // console.log(i)
                }
            }
        }

    }])
    </script>
    </body>
</html>